import type React from "react";
import { cn } from "@/common/cn";

const INPUT_STATUS = {
  ghost: "input-ghost",
  neutral: "input-neutral",
  primary: "input-primary",
  secondary: "input-secondary",
  accent: "input-accent",
  info: "input-info",
  success: "input-success",
  warning: "input-warning",
  error: "input-error",
};

const INPUT_SIZES = {
  xs: "input-xs",
  sm: "input-sm",
  md: "input-md",
  lg: "input-lg",
  xl: "input-xl",
};

export type InputStatus = keyof typeof INPUT_STATUS;

export type InputType =
  | "text"
  | "password"
  | "email"
  | "number"
  | "date"
  | "datetime-local"
  | "week"
  | "month"
  | "tel"
  | "url"
  | "search"
  | "time";

type InputProps = Omit<
  React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
  "size" | "type"
> & {
  status?: InputStatus | undefined;
  size?: Size | undefined;
  type?: InputType | undefined;
  prefix?: React.ReactNode | undefined;
  suffix?: React.ReactNode | undefined;
};

export default function Input({
  size,
  status,
  prefix,
  suffix,
  className,
  style,
  ...p
}: InputProps) {
  const classNames = cn(
    "input",
    size && INPUT_SIZES[size],
    status && INPUT_STATUS[status],
    className,
  );
  if (prefix || suffix) {
    return (
      <label className={classNames} style={style}>
        {prefix}
        <input {...p} />
        {suffix}
      </label>
    );
  }

  return <input className={classNames} style={style} {...p} />;
}
